<template>
  <div class="detials">
    <div v-for="items of mylist" v-bind:key="items.$index">
      <p>{{items.name}}</p>
      <table>
        <thead>
          <th>
            <td>图片</td>
            <td>名称</td>
            <td>伤害</td>
            <td>描述</td>
          </th>
        </thead>
        <tbody>
          <tr v-for="(it,val_d,i)  in items.list" v-bind:key="i">
            <td><img :src="it.img" alt=""></td>
            <td>{{it.name}}</td>
            <td>{{it.attack}}</td>
            <td>{{it.intro}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mylist: ''
    }
  },
  watch: {
    mylist(val) {
      return val;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getList();
      // this.getLocation();
    })
  },
  methods: {
    getList() {
      var vm = this;
      wx.request({
        url: 'http://oyd78mgcu.bkt.clouddn.com/chiji.json',
        data: {

        },
        header: {
          'Content-Type': 'application/json'
        },
        success: function (res) {
          vm.mylist = res.data
          console.log(vm.mylist)
        }
      })
    },
    getLocation() {
      wx.getLocation({
        type: 'gcj02', //返回可以用于wx.openLocation的经纬度
        success: function (res) {
          var latitude = res.latitude
          var longitude = res.longitude
          console.log(latitude, longitude);
          wx.openLocation({
            latitude: latitude,
            longitude: longitude,
            scale: 28
          })
        }
      })
    }
  }
}
</script>
 <style lang="less" scoped>
.detials {
  width: 100%;
  height: 100%;
  color: #000;
  font-size: 16px;
  p {
    background: #ddd;
    padding: 10px 0 10px 10px;
  }
  table {
    padding: 20px;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center;
    th,
    tr {
      align-self: center;
      width: 100%;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      td {
        font-size: 12px;
        text-align: center;
        align-self: center;
        width: 25%;
        margin: 10px 0;
        img {
          width: 50px;
          height: 50px;
        }
      }
    }
  }
  img {
    width: 100%;
  }
}
</style>
 